<template>
  <div class="legend-tools">
    <fold :title="'系列'">
      <div class="content">
        <div>
          <span>显示：</span>
          <el-switch v-model="the_legend_show" @change="setLegendShow"></el-switch>
        </div>
        <div>
            <span>类型</span>
          <el-select
            size="mini"
            v-model="the_legend_type"
            placeholder="请选择"
            @change="setType"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
            <span>水平位置</span>
            <el-slider v-model="the_legend_left" @change="setLegendLeft"></el-slider>
        </div>
        <div>
            <span>垂直位置</span>
            <el-slider v-model="the_legend_top" @change="setLegendTop"></el-slider>
        </div>
        <div>
            <span>宽度</span>
            <el-slider v-model="the_legend_width" @change="setLegendWidth"></el-slider>
        </div>
        <div>
            <span>高度</span>
            <el-slider v-model="the_legend_height" @change="setLegendHeight"></el-slider>
        </div>
        <div>
            <span>朝向</span>
            <el-select v-model="the_legend_orient" @change="setLegendOrient">
                            <el-option
              v-for="item in orients"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            </el-select>
        </div>
        <div>
            <div style="display:flex; align-content:center;">
                <span>颜色：</span>
            <el-color-picker size="mini" v-model="the_legend_color" @change="setLegendColor"></el-color-picker>
            </div>
        </div>
        <div>
            <span>大小</span>
            <el-slider v-model="the_legend_fontsize" @change="setLegendFontSize"></el-slider>
        </div>
      </div>
    </fold>
  </div>
</template>

<script>
import Fold from "@/components/common/Fold.vue";

export default {
  components: {
    Fold,
  },
  props: [
    "legendType",
    "legendShow",
    "legendLeft",
    "legendTop",
    "legendWidth",
    "legendHeight",
    "legendOrient",
    "legendColor",
    "legendFontSize",
  ],
  data() {
    return {
      the_legend_type: this.legendType,
      the_legend_show: this.legendShow,
      the_legend_left: this.legendLeft,
      the_legend_top: this.legendTop,
      the_legend_width: this.legendWidth,
      the_legend_height: this.legendHeight,
      the_legend_orient: this.legendOrient,
      the_legend_color: this.legendColor,
      the_legend_fontsize: this.legendFontSize,

      types:[
          {
              label: "普通",
              value: "plain",
          },
          {
              label: "滚动",
              value: "scroll",
          }
      ],
      orients:[
          {
              label: "水平",
              value: "horizontal",
        },
        {
            label: "垂直",
            value: "vertical",
        }
      ]
    };
  },
  methods: {
      setLegendShow(val){
          this.$store.commit("setChartActiveLegendShow", val)
      },
      setType(val){
          this.$store.commit("setChartActiveLegendType", val)
      },
      setLegendLeft(val){
          this.$store.commit("setChartActiveLegendLeft", val)
      },
      setLegendTop(val){
          this.$store.commit("setChartActiveLegendTop", val)

      },
      setLegendWidth(val){
          this.$store.commit("setChartActiveLegendWidth", val)

      },
      setLegendHeight(val){
          this.$store.commit("setChartActiveLegendHeight", val)

      },
      setLegendOrient(val){
          this.$store.commit("setChartActiveLegendOrient", val)
      },
      setLegendColor(val){
          this.$store.commit("setChartActiveLegendColor", val)

      },
      setLegendFontSize(val){
          this.$store.commit("setChartActiveLegendFontSize", val)

      }
  },
};
</script>

<style scoped>
    .legend-tools{
        margin-top: 5px;
    }

    .content > div{
        margin-bottom: 15px;
    }
</style>